=<template>
	<view class='page'>
		<view class='page-header'>
			<my-bar v-if="currentTabBarComponent=='search'" type="search"></my-bar>
			<my-bar v-if="currentTabBarComponent=='back'" type="back"></my-bar>
		</view>
		<view class='page-main'> 
			<home v-if="currentTab=='home'" :listDatas="latest" :listLoadStatus="loadStatus"></home>
			<ucenter v-if="currentTab=='ucenter'"></ucenter> 
		</view>
		<view class='page-footer'>
			<my-tabbar @change="switchTab"></my-tabbar>
		</view>
	</view>
</template>

<script>
	var page = 1,
		id = 4; // 定义全局参数,控制数据加载  
	export default {
		data() {
			return {
				currentTab: 'home',
				/* isShowTabbar: true, */
				latest: [{
					id: 1
				}, {
					id: 2
				}, {
					id: 3
				}],
				loadStatus: "more"
			};
		},
		/*  */
		methods: {
			switchTab(e) {
				this.currentTab = e;
			},
			/* showTabbar(e) {//是否显示底部 解决页面底部fixed定位元素被软键盘顶起
				this.isShowTabbar = !e;
			}, */
			getmorenews: function() {
				if (this.loadMore.status !== "more") {
					//loadingType!=more;直接返回  
					return false;
				}
				this.loadMore.status = "loading";
				uni.showNavigationBarLoading(); //显示加载动画        
				uni.request({
					url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page=' + page,
					method: 'GET',
					success: function(res) {
						console.log(JSON.stringify(res));
						if (res.data == null) { //没有数据 
							this.loadMore.status = "noMore";
							uni.hideNavigationBarLoading(); //关闭加载动画                
							return;
						}
						page++; //每触底一次 page +1       
						_self.newsList = _self.newsList.concat(res.data.split('--hcSplitor--'));
						//将数据拼接在一起       
						this.loadMore.status = "more"; //将loadingType归0重置  
						uni.hideNavigationBarLoading(); //关闭加载动画 
					}
				});
			},
			getnewsList: function() { //第一次回去数据    
				page = 1;
				this.loadMore.status = "more";
				uni.showNavigationBarLoading();
				uni.request({
					url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page=1',
					method: 'GET',
					success: function(res) {
						page++; //得到数据之后page+1       
						_self.newsList = res.data.split('--hcSplitor--');
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh(); //得到数据后停止下拉刷新 
					}
				});
			}
		},
		computed: {
			currentTabBarComponent: function() {
				if (this.currentTab == "home") {
					return "search";
				} else if (this.currentTab == "ucenter") {
					return "";
				} else {
					return "back";
				}
				return this.currentTab;
			},
			currentTabContentComponent: function() {
				return this.currentTab;
			}
		},
		onLoad() {},
		onPullDownRefresh() { //下拉刷新   
		},
		onReachBottom() {
			uni.showModal({
				content:"333"
			})
			if (id > 6) {
				this.loadStatus = "noMore"
			} else {
				this.loadStatus = "loading";
				this.latest.push.apply(this.latest, [{
					id: id
				}])
			}
			id++;
		},
		onPageScroll(res) {
			//console.log(res.scrollTop);
			/* if (res.scrollTop <= 150) {
				this.navbg.background = "#ffffff00"
			} else {
				this.navbg.background = "#30A2FC";
				this.navbg.color = "#fff"

			} */
			/* uni.createSelectorQuery().select("#nav").boundingClientRect(function(rects) { //这行的结果是指定Id元素距离屏幕顶端的高度
				//console.log(rects)
				var query = uni.createSelectorQuery()
				query.select('#main').boundingClientRect()  
				query.selectViewport().scrollOffset()
				query.exec(function(res) {
					uni.pageScrollTo({
						scrollTop: rects.top + res[1].scrollTop,
						duration: 300
					})
				})

			}).exec(); //这行的结果res是指定最外围的view 滚动的距离 */
		}
	}
</script>

<style>
/*每个页面公共css */
	page {
		min-height: 100%;
		/*如果使用flex布局实现固定头部和底部*/
		height: 100%;
	}

	/*如果使用flex布局实现固定头部和底部start*/
	.page {
		/* // 关键， flex布局 */
		display: flex;
		/* // 关键，三块主题column摆放。 */
		flex-direction: column;
		/* // 关键，设置高度为可见高度的100%；        */
		height: 100%;
	}

	.page-header {
		width: 100%;
	}

	.page-main {
		/* // 关键， 填充剩余空间 */
		flex: 1;
		/* // 关键， 超出部分滚动 */
		width: 100%;
		overflow-y: scroll;
	}

	.page-footer {
		width: 100%;
	}

</style>
